<div class="cnsl-filter-button-wrapper">
  <button mat-stroked-button class="filter-toggle" (click)="toggleFilter()" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
    <div class="cnsl-action-button">
      <i class="las la-filter no-margin"></i>
      <span>{{ 'ACTIONS.FILTER' | translate }}</span>
      <span *ngIf="queryCount" class="filter-count">{{ queryCount }}</span>
      <cnsl-action-keys [doNotUseContrast]="true" [type]="ActionKeysType.FILTER" (actionTriggered)="toggleFilter()">
      </cnsl-action-keys>
    </div>
  </button>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayOffsetY]="10"
    [cdkConnectedOverlayPositions]="positions"
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="showFilter"
    cdkConnectedOverlayBackdropClass="transparent-backdrop"
    (backdropClick)="showFilter = false"
    (detach)="showFilter = false"
  >
    <div class="cnsl-filter-wrapper" cdkTrapFocus>
      <div class="filter-top">
        <button mat-stroked-button (click)="resetted.emit()">{{ 'ACTIONS.RESET' | translate }}</button>
        <span class="filter-middle">{{ 'FILTER.TITLE' | translate }}</span>
        <button mat-raised-button color="primary" (click)="emitFilter()">{{ 'ACTIONS.APPLY' | translate }}</button>
      </div>
      <ng-content></ng-content>
    </div>
  </ng-template>
</div>
